<template>
  <div class="monitor">
    <div class="videobox" v-if="isshow==true">
      <div
        v-for="(item, index) in vedioData"
        :key="'spqymain' + index"
       
      >
        <video
          :id="'my-videoa' + index"
          class="video-js vjs-default-skin vjs-big-play-centered"
          controls
          muted
          preload="auto"
          style="width: 100%; height: 100%"
        >
          <source :src="item.path" :type="item.type" />
          <!-- <source :src="item.path" type="video/mp4" /> -->
        </video>
        <div class="videoControl">
      <div class="directionCon">
        <div class="dbg">
          <div class="up" @click="onClick(0)" @mouseout="onMouseOut(0)"></div>
          <div class="down" @click="onClick(1)" @mouseout="onMouseOut(1)"></div>
          <div class="left" @click="onClick(4)" @mouseout="onMouseOut(4)"></div>
          <div
            class="right"
            @click="onClick(3)"
            @mouseout="onMouseOut(3)"
          ></div>
        </div>
      </div>
      <div class="sizeCon">
        <div class="sizeBg">
          <div class="big" @click="onClick(8)" @mouseout="onMouseOut(8)"></div>
          <div
            class="small"
            @click="onClick(9)"
            @mouseout="onMouseOut(9)"
          ></div>
        </div>
      </div>
    </div>
      </div>
    </div>

    <div class="trable" v-if="isshow==false"></div>
  </div>
</template>

<script>
import { getVideoUrl, doVideoStart, doVideoStop } from "@/api/apiPOI";
import videojs from "video.js/dist/video.min";
import "video.js/dist/video-js.min.css";
import "videojs-flash/dist/videojs-flash";
import "videojs-contrib-hls";
export default {
  data() {
    return {
      players: [],
      isshow: false,
      vedioData: [
        // {
        //   path: "http://hls01open.ys7.com/openlive/30bbd83ff1c745c5a29ffa3263de0462.m3u8",
        //   type: "application/x-mpegURL",
        // },
        {
          path: "",
          type: "application/x-mpegURL",
        },
      ],
    };
  },
  props: {
    paramsData: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  watch: {
    paramsData: {
      handler(newVal, oldVal) {
        if (newVal && newVal.hasOwnProperty("deviceId")) {
          getVideoUrl({ deviceId: newVal.deviceId }).then((res) => {
            let paramType = (value, type) =>
              Object.prototype.toString.call(value).includes(type);
            if (paramType(res, "Object")) {
              console.log(res);
              if (res.data.length==0) {
                // return;
                this.isshow = false;
                this.vedioData[0].path = "";
              } else {
                this.isshow = true;
                this.vedioData[0].path = res.data[0].hlsUrl;
                this.videoItem = res.data[0];
              }
            }
          });
        }
      },
      immediate: true,
    },
  },
  beforeMount() {},
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.initVideo();
      }, 1000);
    });
  },
  destroyed() {
    this.players.forEach((element) => {
      element.dispose();
    });
  },
  methods: {
    initVideo() {
      //id必须是唯一的，遍历id,
      this.players = [];
      for (let i = 0; i < this.vedioData.length; i++) {
        let player = videojs(
          "my-videoa" + i,
          {
            // bigPlayButton: false,
            textTrackDisplay: false,
            posterImage: true,
            errorDisplay: false,
            controlBar: true,
          },
          function () {
            this.play();
          }
        );
        this.players.push(player);
      }
    },
     //方向(0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小，10-近焦距，11-远焦距)
    onClick(value) {
      this.doStartVideo(value);
    },
    doStartVideo(val) {
      let params = {
        direction: val,
        speed: "1", //速度
        deviceSerial: this.videoItem.deviceSerial, //设备号
        channelNo: this.videoItem.channelNo, //通道号
      };
      doVideoStart(params).then((res) => {
        let paramType = (value, type) =>
          Object.prototype.toString.call(value).includes(type);
        if (paramType(res, "Object")) {
        }
      });
    },
    onMouseOut(value) {
      this.doStopVideo(value);
    },
    doStopVideo(val) {
      let params = {
        direction: val,
        deviceSerial: this.videoItem.deviceSerial, //设备号
        channelNo: this.videoItem.channelNo, //通道号
      };
      doVideoStop(params).then((res) => {
        let paramType = (value, type) =>
          Object.prototype.toString.call(value).includes(type);
        if (paramType(res, "Object")) {
        }
      });
    },
  },
};
</script>

<style  lang="scss" scoped>
.monitor {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
/* .monitor > div {
  width: 100%;
  height: 100%;
} */
.videobox {
  width: 100%;
  height: 100%;
  position: relative;
}
.videobox>div{
  width: 100%;
  height: 100%;
}
.trable {
  position: absolute;
  top: 80px;
  left: 2%;
  z-index: 999;
  /* border: 1px solid red; */
  width: 96%;
  height: 66%;
  /* background-color: rebeccapurple; */
}
.videoControl {
  position: absolute;
  top: 90px;
  left: 460px;
  z-index: 999;
  // background-color: yellowgreen;

  .directionCon {
    .dbg {
      width: 50px;
      height: 50px;
      background: url("@/assets/video/d-bg.png");

      .up {
        width: 8px;
        height: 7px;
        background: url("@/assets/video/up-uncheck.png");
        position: relative;
        top: 6px;
        left: 21px;
        cursor: pointer;
      }
      .up:active {
        background: url("@/assets/video/up-check.png");
      }
      .up:hover {
        background: url("@/assets/video/up-check.png");
      }
      .down {
        width: 8px;
        height: 6px;
        background: url("@/assets/video/down-uncheck.png");
        position: relative;
        top: 32px;
        left: 21px;
        cursor: pointer;
      }
      .down:active {
        background: url("@/assets/video/down-check.png");
      }
      .down:hover {
        background: url("@/assets/video/down-check.png");
      }
      .left {
        width: 6px;
        height: 8px;
        background: url("@/assets/video/left-uncheck.png");
        position: relative;
        top: 8px;
        left: 4px;
        cursor: pointer;
      }
      .left:active {
        background: url("@/assets/video/left-check.png");
      }
      .left:hover {
        background: url("@/assets/video/left-check.png");
      }
      .right {
        width: 7px;
        height: 8px;
        background: url("@/assets/video/right-uncheck.png");
        position: relative;
        top: 0px;
        left: 38px;
        cursor: pointer;
      }
      .right:active {
        background: url("@/assets/video/right-check.png");
      }
      .right:hover {
        background: url("@/assets/video/right-check.png");
      }
    }
  }

  .sizeCon {
    position: absolute;
    top: -70px;
    left: 12px;

    .sizeBg {
      width: 24px;
      height: 61px;
      background: url("@/assets/video/s-bg.png");

      .big {
        width: 17px;
        height: 16px;
        background: url("@/assets/video/big-uncheck.png");
        position: relative;
        top: 6px;
        left: 4px;
        cursor: pointer;
      }

      .big:active {
        background: url("@/assets/video/big-check.png");
      }
      .big:hover {
        background: url("@/assets/video/big-check.png");
      }

      .small {
        width: 17px;
        height: 16px;
        background: url("@/assets/video/small-uncheck.png");
        position: relative;
        top: 20px;
        left: 4px;
        cursor: pointer;
      }

      .small:active {
        background: url("@/assets/video/small-check.png");
      }
      .small:hover {
        background: url("@/assets/video/small-check.png");
      }
    }
  }
}
</style>
